<template>
	<view>
		<view class="item" v-for="item in list" :key="item.id">{{item.name}}</view>
		<view v-if="loading" class="loading" style="height: 50rpx;">加载中</view>
	</view>
</template>

<script setup>
	import {onPullDownRefresh, onReachBottom} from '@dcloudio/uni-app'
import { reactive, ref } from 'vue';
	const list = ref([])
	const loading = ref(true)
	onPullDownRefresh(() => {
		console.log('我要开始刷新了')
		//重新调用接口获取数据，如果有分页，把页码置为1
		pageInfo.pageNum = 0
		list.value = []
		getData()
	})
	onReachBottom(() => {
		console.log('页面滚动到底部了')
		pageInfo.pageNum += 1
		getData()
	}) 
	const pageInfo = reactive({
		pageNum: 0,
		pageSize: 50
	})
	const pageSize = ref(10)
	const getData = () => {
		loading.value = true
		console.log('1')
		setTimeout(() => {
			console.log('2')
			const arr = []
			for (let i = (pageInfo.pageNum * pageInfo.pageSize); i < ((pageInfo.pageNum+1) * pageInfo.pageSize); i++) {
				console.log(i)
				arr.push({name: '姓名'+i, id: i})
			}
			console.log(arr)
			list.value = [...list.value, ...arr]
			loading.value = false
			uni.stopPullDownRefresh()
		}, 2000)
	}
	getData()
</script>

<style>
	       
</style>
